import React, { Component } from 'react';
import { List } from '$yo-component';
import Header from '$component/header/index.js';
import yoHistory from '$common/history';
import './index.scss';
require('isomorphic-fetch');

class Detail extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: [{text:'',key:++guid}]
        };
    }
    refresh(){
        this.setState({dataSource:getRandomDataSource(25)})
    }
    fetch(){
        fetch('http://localhost:3000/skills')
        .then((res)=>{
            return res.json();
        })
        .then((skill)=>{
            console.log(skill);
            this.setState({dataSource:skill})
        })
    }
    componentWillMount(){
        this.fetch();
    }
    render() {
        return (
            <div className="yo-flex">
                <Header title="技能"/>
                <List
                    ref="list"
                    extraClass="flex m-list"
                    dataSource={this.state.dataSource}
                    renderItem={(item, i) => <div className="yo-list yo-list-group">
                       <a href="#" className="item">
                            <img src={item.img} />
                            <div className="flex">
                                <h3 className="title">{item.category}</h3>
                                <p className="name">{item.name}</p>
                                <p className="detail"><span className="time">{item.time}</span>/<span className="level">{item.level}</span></p>
                            </div>
                       </a>
                       
                    </div>
                    }
                     infinite={false}
                     infiniteSize={20}
                     itemHeight={44}
                     usePullRefresh={false}
                     onRefresh={() => {
                         setTimeout(() => {
                             this.refresh();
                             this.refs.list.stopRefreshing(true);
                         }, 500);
                     }}
                     useLoadMore={false}
                     onLoad={() => {
                         setTimeout(() => {
                             this.fetch();
                             this.refs.list.stopLoading(true);
                         }, 500);
                     }}
                     itemExtraClass={(item, i) => {
                         return 'item ' + i;
                     }}
                     onItemTap={(item, i, ds) => {
                         yoHistory.push('/detail');
                     }}
 
                />
            </div>
        )
    }
}

let guid = -1;

function getArrayByLength(length) {
    var ret = [];
    for (var i = 0; i < length; i++) {
        ret[i] = null;
    }
    return ret;
}

function getRandomList(size) {
    return getArrayByLength(size).fill(1).map(num => parseInt(Math.random() * 100));
}

function getRandomDataSource(size) {
    return getRandomList(size).map(num => ({ text: num, key: ++guid }));
}


export default Detail;
